/**
 * 绘制大量线条
 *
 * @文档 MapVGL
 * https://lbsyun.baidu.com/solutions/mapvdata
 */

import {
	computed,
	onBeforeUnmount
} from 'vue';
import {
	chunk
} from 'lodash-es';
import {
	polylineColor,
	polylineColor2
} from '@/utils/polyLineColor';
import {
	useMapStore
} from '@/store/modules/map';

/**
 * TODO: 需要修改，保证只存在一个view
 * @param {*} enable Ref<boolean>
 * @returns
 */
export function useLargeLine() {
	const mapStore = useMapStore();
	const map = computed(() => mapStore.ownMap);

	let layers = null;
	let view = null;

	const createLayers = () => {
		if (!view) {
			view = new window.mapvgl.View({
				map: map.value,
				mapType: 'bmap',
			});
		}

		if (!layers) {
			layers = {}; // 确保 layers 只初始化一次

			polylineColor2.forEach((item) => {
				// console.log(item, 'item');

				// 计算线条宽度，根据道路等级 lev 进行判断
				const widthMap = {
					1: 2.5, // 主干路示例
					2: 2, // 次干路示例
					3: 2, // 支路示例
					4: 3, // 快速路示例
					10: 2, // 未建（根据原先定义，这里仍以正常道路宽度作为参考）
					11: 2 // 建设不符（参考值）
				};
				const widthSet = widthMap[item.lev] || 2; // 默认宽度为 2

				// 判断当前图层是否包含“未建”或“与建设不一致”
				const isDashed = item.type.includes('未建') || item.type.includes('与建设不一致');

				// 如果需要虚线，初步定义 dashArray 为 [10, 5]
				let dashArray = isDashed ? [10, 5] : [];

				// 对于“与建设不一致”，虚线的线宽放大一倍，且 dashArray 的间隔增加 50%
				let finalWidth = widthSet;
				if (item.type.includes('与建设不一致')) {
					// finalWidth = widthSet * 2;
					dashArray = [3, 3];
				}
				console.log(layers, item.type, 'layers')
				// 创建图层，颜色直接取自 polylineColor 中的 color，保证和对应道路等级一致
				layers[item.type] = {
					data: [],
					layer: new window.mapvgl.LineLayer({
						blend: 'lighter',
						width: finalWidth, // 使用计算后的宽度
						color: item.color, // 颜色与道路等级保持一致
						dashArray: dashArray, // 虚线样式（实线则为空数组）
					}),
				};

				console.log(layers[item.type]);
				view.addLayer(layers[item.type].layer);
			});
		}

		clearLargeLine();
	};
	const darwLargeLine = (data, point, level = 15, isZoom, isDashedRoad) => {
		// isDashedRoad 控制只有点击左下角的指示时 才显示虚线相关道路
		// console.log(data, point, level = 15, isZoom, isDashedRoad)
		createLayers();
		point = point ? point : chunk(data[0]?.coordinate?.split(','), 2)[0];
		const points = new window.BMap.Point(point[0], point[1]);
		if (isZoom) {} else {
			map.value.centerAndZoom(points, level);
		}
		data.forEach((item) => {
			try {
				let name = item.ghdldj + item.finished
				// if (item.finished == '未建' && isDashedRoad) {
				// 	console.log(item)
				// 	layers['未建'].data.push({
				// 		label: item.ghdldj,
				// 		geometry: {
				// 			type: 'LineString',
				// 			coordinates: chunk(item?.coordinate?.split(','), 2),
				// 		},
				// 	});
				// } else if ((item.finished == '规划与建设不一致' || item.finished == '规划外') && isDashedRoad) {
				// 	layers['建设不符'].data.push({
				// 		label: item.ghdldj,
				// 		geometry: {
				// 			type: 'LineString',
				// 			coordinates: chunk(item?.coordinate?.split(','), 2),
				// 		},
				// 	});
				// } else {
				//之前的逻辑 这里只是按 ghdldj 规划道路等级 字段来分类整理的数据
				console.log(name)
				layers[name].data.push({
					geometry: {
						type: 'LineString',
						coordinates: chunk(item?.coordinate?.split(','), 2),
					},
				});
				// }
			} catch (error) {
				// console.log('item.ghdldj :>> ', item.ghdldj);
			}
		});
		Object.keys(layers).forEach((key) => {
			console.log(layers, key)
			const layer = layers[key].layer;
			// 确保数据被正确更新
			layer.setData(layers[key].data);
		});
	};

	const clearLargeLine = (isClear = false) => {
		if (!layers) {
			return;
		}
		Object.keys(layers).forEach((key) => {
			layers[key].data = [];
			layers[key].layer?.clear?.();
		});
		// if(isClear){
		//  layers = null;
		// }
	};

	onBeforeUnmount(() => {
		clearLargeLine();
		view?.destroy?.();
		view = null;
	});

	return {
		darwLargeLine,
		clearLargeLine,
	};
}